<template>
  <a-card title="数据统计" :bordered="false" class="a-card1">
    <div id="c1"></div>
  </a-card>
</template>

<script>
import G2 from '@antv/g2'
export default {
  data () {
    return {
      c1Data: [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 }
      ]
    }
  },
  mounted () {
    const chart = new G2.Chart({
      container: 'c1', // 指定图表容器 ID
      width: 600, // 指定图表宽度
      height: 300 // 指定图表高度
    })
    chart.source(this.c1Data)
    chart.interval().position('genre*sold').color('genre')
    chart.render()
  }
}
</script>

<style scoped>
.ant-card {
  width: 700px;
}
</style>
